<template>
  <div class="app-container">
    <div class="content-container">
      <div class="top_panel">
        <el-row :gutter="5">
          <el-col :span="2">
            <h2>ID</h2>
          </el-col>
          <el-col :span="6">
            <h2>时间</h2>
          </el-col>
          <el-col :span="3">
            <h2>{{isAdmin?"提交人":"主题"}}</h2>
          </el-col>
          <el-col :span="2">
            <el-button v-if="!isAdmin" type="primary" icon="el-icon-edit" @click="leaveMsg">留言</el-button>
            <h2 v-else>主题</h2>
          </el-col>
          <el-col :span="7">
            <el-input v-model="query.title" 
                      clearable 
                      placeholder="输入名称查找" 
                      @clear="getPage"
                      @keyup.enter.native="search" />
          </el-col>
          <el-col :span="4">
            <el-dropdown @command="handleFilter" 
                         @click="search"
                         trigger="click" 
                         split-button 
                         :type="pageStatus | statusFilter">
              {{pageStatus}}
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command='全  部'>全  部</el-dropdown-item>
                <el-dropdown-item command='待审核'>待审核</el-dropdown-item>
                <el-dropdown-item command='已通过'>已通过</el-dropdown-item>
                <el-dropdown-item command='未通过'>未通过</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
          
        </el-row>
      </div>
      
      <div v-if="total == 0">
        <h2 style="text-align: center;">暂无留言记录</h2>
      </div>
      <div v-else>
        <!-- 列表内容 -->
        <el-collapse v-model="activeName" accordion>
          <el-collapse-item v-for="item in pageList" :name="item.id">
            <template slot="title">
              <el-row class="title">
                <el-col :span="2">
                  <b>{{isAdmin?item.tid:item.msgId}}</b>
                </el-col>
                <el-col :span="6">
                  <h3>{{parseTime(item.createTime)}}</h3>
                </el-col>
                <el-col :span="3">
                  <h3>{{isAdmin?item.name:item.title}}</h3>
                </el-col>
                <el-col :span="6">
                  <h3>{{isAdmin?item.title:'-'}}</h3>
                </el-col>
                <el-col :span="2" :offset="5">
                  <el-tag :type="item.status | statusFilter">{{item.status}}</el-tag>
                </el-col>
              </el-row>
            </template>
            <div class="collapse">
              <el-row class="title">
                <el-col :span="22" :offset="1">
                  <div>{{item.content || '暂无描述'}}</div>
                </el-col>
                <el-col :span="1" v-if="isAdmin && item.status=='待审核'">
                  <div class="right-panel">
                    <el-button :loading="loading[0]" 
                                size="mini" 
                                type="success" 
                                @click="handleRecord('已通过',item.msgId, 0)">同意</el-button>
                    <br/>
                    <el-button :loading="loading[1]" 
                                size="mini" 
                                type="danger" 
                                @click="handleRecord('未通过',item.msgId, 1)">拒绝</el-button>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-collapse-item>
        </el-collapse>
        <!-- 底部按钮 -->
        <div class="pagination-container">
          <pagination
                class="pagination"
                hide-on-single-page 
                :total="total" 
                :page.sync="query.page" 
                :limit.sync="query.limit" 
                @pagination="getPage" />
          <div class="bottom-button" v-show="isAdmin" >
            <el-button :loading="loading[2]" type="danger" @click="handleRecord('未通过',null, 2)">全部拒绝</el-button>
            <el-button :loading="loading[3]" type="success" @click="handleRecord('已通过',null, 3)">全部同意</el-button>
          </div>
        </div>
      </div>
      <el-dialog title="留言表单" :visible.sync="dialogFormVisible">
        <el-form 
          ref="dataForm" 
          :rules="rules" 
          :model="temp" 
          label-position="right" 
          label-width="80px" 
          class="data-form">
      
          <el-form-item label="工号" prop="tid">
            <el-input v-model="temp.tid" readonly/>
          </el-form-item>
          <el-form-item label="主题" prop="title">
            <el-input v-model="temp.title" placeholder="输入主题名称"/>
          </el-form-item>
          <el-form-item label="问题描述" prop="content">
            <el-input v-model="temp.content" 
                      :autosize="{ minRows: 4, maxRows: 8}" 
                      type="textarea" 
                      placeholder="在此输入具体描述" />
          </el-form-item>
        </el-form>
        <div slot="footer">
          <el-button @click="cancelForm">取消</el-button>
          <el-button type="primary" @click="submitForm">确定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { fetchRecord,updateRecord,leaveMsg } from '@/api/record'
import Pagination from '@/components/Pagination'
import { parseTime } from '@/utils/index'
export default {
  name: 'record',
  components: { Pagination },
  data() {
    return {
      List:[],
      pageList:[],
      total:0,
      activeName: '1',
      loading:[false, false, false, false],
      dialogFormVisible: false,
      pageStatus: '全  部',//
      query:{
        tid: null, 
        aid: null,
        fid: null,
        title:'',
        status: '待审核',
        page: 1,
        limit: 10,
      },
      temp: {
        tid: this.uid,
        title: '',
        content: '',
      },
      rules: {
        title: [{ required: true, message: '请填写主题名称', trigger: 'blur' }],
        content: [{ required: true, message: '请描述遇到的问题', trigger: 'blur' }],
      },
    }
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        '待审核':'warning',
        '已通过':'success',
        '未通过':'danger',
        '全  部':'primary',
      }
      return statusMap[status]
    },
  },
  computed: {
    ...mapGetters([
      'role',
      'uid',
    ]),
    isAdmin(){
      return this.role == 'Admin'
    }
  },
  created() {
    this.$store.dispatch('user/getNum')
    this.getList()
  },
  methods: {
    getList(){
      if(!this.isAdmin) this.query.tid = this.uid
      else this.query.aid = this.uid
      fetchRecord(this.query).then(response => {
        this.List = response.load.msgList.reverse()
        console.log(this.List)
        this.total = response.load.total
        this.getPage()
      })
    },
    getPage(){
      this.pageList = this.List.filter((item, index) =>
        index < this.query.limit * this.query.page 
        && index >= this.query.limit * (this.query.page - 1))
      if(this.pageStatus != '全  部')
        this.pageList = this.pageList.filter(v=>v.status == this.pageStatus)
    },
    handleFilter(command){
      this.pageStatus = command
      this.getPage()
    },
    search(){
      if(this.query.title){
        if(this.isAdmin)this.pageList = this.List.filter(v=>v.name.indexOf(this.query.title) >= 0)
        else this.pageList = this.List.filter(v=>v.title.indexOf(this.query.title) >= 0)
      }else{
        this.getPage()
      }
    },
    parseTime(time){
      return parseTime(time)
    },
    leaveMsg(){
      this.resetTemp()
      this.dialogFormVisible = true
    },
    submitForm() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          leaveMsg(this.temp).then(response => {
            this.dialogFormVisible = false
            this.$notify({
              title: '成功',
              message: `成功留言。`,
              type: 'success',
              duration: 2000
            })
            this.getList()
          }).catch(()=>{
            console.log("留言失败")
          })
        }
      })
      
    },
    cancelForm(){
      this.dialogFormVisible = false
    },
    resetTemp() {
      this.temp = {
        tid: this.uid,
        title: '',
        content: '',
      }
    },
    ///////////////Admin bellow/////////////////////
    handleRecord(status, fid, index){
      this.query.fid = fid
      this.query.status = status
      this.loading.splice(index, 1, true)
      // console.log(this.query, this.List)
      updateRecord(this.query).then(response=>{
        this.loading.splice(index, 1, false)
        this.$store.dispatch('user/getNum')
        this.List.forEach(v=>{//改为直接下标修改值
          if(v.msgId == fid) v.status = this.query.status
          if(fid==null && v.status == '待审核') v.status = this.query.status
        })
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
  .top_panel{
    margin-bottom: 20px;
    h2{
      // border: 1px solid red;
      margin: 0px;
    }
  }
  .title{
    width: 100%;
    h3{
      margin: 0;
    }
  }
  .collapse{
    .right-panel{
      // border: 1px solid red;
      display:flex;
      flex-flow: column;
      justify-content: space-between;
    }
  }
  .pagination-container{
    // border: 1px solid blue;
    height: 66px;
    line-height: 66px;//必须
    .pagination{
      // border: 1px solid green;
      display: inline-block;
    }
    .bottom-button{
      // border: 1px solid red;
      display: inline-block;
      float: right;
      vertical-align: text-bottom;
    }
  }
}
</style>
